<template>
	<div>
		<el-button size="mini" type="primary" @click="edit('add')">新增
		</el-button>
		<el-table v-loading="tableDataLoading" :data="tableData">
			<el-table-column v-for='(s, i) in tableOption' :key='i' :prop='s.prop' :label='s.label' :min-width='s.width'
							 align='center'/>
			<el-table-column label='操作' prop='enabled' fixed='right' width='300'>
				<template slot-scope="scope">
					<el-button size="mini" type="primary" @click="edit('edit',scope.row)">编辑
					</el-button>
					<el-button size="mini" type="danger"
							   @click="del(scope.row)">删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--	编辑框-->
		<el-dialog :title="titleName" :visible.sync="dialogFormVisible">
			<el-form :model="form" :rules="rules" ref="ruleForm" >
				<el-form-item label="类型" prop="type">
					<el-radio v-model="form.type" :label="0">司机原因</el-radio>
					<el-radio v-model="form.type" :label="1">乘客原因</el-radio>
				</el-form-item>
				<el-form-item label="取消原因" prop="reason">
					<el-input v-model="form.reason" type="textarea"
							  :rows="2"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="submit" :disabled="!form.reason.length">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: 'reasonList',
	data () {
		return {
			tableDataLoading: false,
			tableData: [
			],
			tableOption: [
				{label: '取消原因', prop: 'reason'},
				{label: '类型', prop: 'typedesc'},
			],
			dialogFormVisible: false,
			titleName: '新增',
			form: {
				reason: '',
				type: 1
			},
			rules: {
				type: [
					{required: true, message: '请选择原因类型', trigger: 'change'},
				],
				reason: [
					{required: true, message: '请输入原因', trigger: 'blur'},
				],
			}

		}
	},
	mounted () {
		this.getList()
	},
	methods: {
		//保存
		submit () {
			this.$refs['ruleForm'].validate((valid) => {
				if (valid) {
					if (this.form.id) {
						this.$http({
							url: this.$http.adornUrl('cancel/updateReason'),
							method: 'post',
							data: this.$http.adornData({
								id: this.form.id,
								reason: this.form.reason,
								type: this.form.type,
							})
						}).then(({
							data
						}) => {
							if (data.code == 0) {
								this.$message({
									message: '操作成功',
									type: 'success',
									duration: 1500,
									onClose: () => {
										this.cancel()
									}
								})
							} else {
								this.$message({
									message: data.msg,
									type: 'error',
									duration: 1500,
								})
							}
						})
					} else {
						this.$http({
							url: this.$http.adornUrl('cancel/addReason'),
							method: 'post',
							data: this.$http.adornData({
								id: this.form.id,
								reason: this.form.reason,
								type: this.form.type,
							})
						}).then(({
							data
						}) => {
							if (data.code == 0) {
								this.$message({
									message: '操作成功',
									type: 'success',
									duration: 1500,
									onClose: () => {
										this.cancel()
									}
								})
							} else {
								this.$message({
									message: data.msg,
									type: 'error',
									duration: 1500,
								})
							}
						})
					}
				} else {
				this.$message.error('请输入必填选项')
				}
			});


		},
		//取消
		cancel () {
			this.dialogFormVisible = false
			this.titleName = ''
			this.form = {
				reason: ''
			}
			this.getList()
		},
		//删除
		del (item) {
			this.$confirm(`确定删除此条信息?`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$http({
					url: this.$http.adornUrl(`cancel/deleteReason`),
					method: 'post',
					params:{id:item.id}
				}).then(({
					data
				}) => {
					if (data.code == 0) {
						this.$message({
							message: '删除成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.getList()
							}
						})
					} else {
						this.$message({
							message: data.msg,
							type: 'error',
							duration: 1500,
						})
					}
				})
			}).catch(() => {
			})
		},
		//编辑
		edit (state, item) {
			switch (state) {
				case 'add':
					this.dialogFormVisible = true
					this.titleName = '新增取消原因'
					this.form = {
						reason: ''
					}
					break
				case 'edit':
					this.dialogFormVisible = true
					this.titleName = '编辑取消原因'
					this.form = item
					break
			}

		},
		getList () {
			this.tableDataLoading = true
			this.$http({
				url: this.$http.adornUrl('cancel/queryReason'),
				method: 'get',
			}).then(({
				data
			}) => {
				this.tableDataLoading = false
				this.tableData = data.data.map(item => {
					return {
						...item,
						typedesc: item.type == 0 ? '司机原因' : '乘客原因'
					}
				})
			}).finally(() => {
				this.tableDataLoading = false
			})
		},
		handleDep (item) {

		}
	}
}
</script>

<style scoped>

</style>
